<template>
    <div>
      <el-table :data="goodsList" border style="width: 100%">
        <el-table-column prop="id" label="商品编号" width="80px">
        </el-table-column>
        <el-table-column prop="goodsname" label="商品名称"> </el-table-column>
        <el-table-column label="商品价格" width="80px" prop="price"> </el-table-column>
        <el-table-column label="市场价格" width="80px" prop="market_price"> </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="item">
            <div>
              <img v-if="item.row.img" class="imgUrl"  :src="item.row.img" alt="">
            </div>
          </template>
           </el-table-column>
        <el-table-column label="是否新品" width="80px"> 
           <template slot-scope="item">
            <div>
              <el-tag v-if="item.row.isnew == 1" type="success">是</el-tag>
              <el-tag v-else type="danger">否</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否热卖" width="80px">
          <template slot-scope="item">
            <div>
              <el-tag v-if="item.row.ishot == 1" type="success">是</el-tag>
              <el-tag v-else type="danger">否</el-tag>
            </div>
          </template> </el-table-column>
        <el-table-column label="状态" width="100px">
          <template slot-scope="item">
            <div>
              <el-tag v-if="item.row.status == 1" type="success">启用</el-tag>
              <el-tag v-else type="danger">禁用</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="item">
            <div>
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="edit(item.row.id)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                @click="del(item.row.id)"
                size="mini"
                icon="el-icon-delete"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加分页器 
      total 列表的总条数
      background 带背景色
      page-size	每页显示条目个数
      current-change currentPage 改变时会触发	当前页
      -->
      <el-pagination
        :page-size="size"
        background
        layout="prev, pager, next"
        @current-change="changePage"
        :total="count"
      >
      </el-pagination>
    </div>
  </template>
  
  <script>
  import { mapGetters, mapActions } from "vuex";
  import { goodsdelete } from "../../request/api";
  export default {
    data() {
      return {
  
      };
    },
    mounted() {
      // console.log(this,'实例')
      //页面一加载就获取商品列表
      this.getGoodsList();
      //调取列表总数
      this.getCount();
    },
    computed: {
      ...mapGetters({
        goodsList: "goods/getGoodsList",
        count: "goods/getCount",
        size: "goods/getSize"
      })
    },
    methods: {
      //封装一个切换页码的函数方法
      changePage(n) {
        console.log(n, "当前页！！！");
        this.changePageAction(n);
      },
      ...mapActions({
        getGoodsList: "goods/getGoodsListAction",
        getCount: "goods/getCountAction",
        changePageAction: "goods/changePageAction"
      }),
      //封装一个删除事件
      del(id) {
        this.$confirm("你确定要删除这条数据吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            //调取删除接口
            goodsdelete({ id }).then(res => {
              if (res.code == 200) {
                this.getGoodsList();
                this.getCount();
                this.$message.success(res.msg);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      //封装一个点击编辑按钮事件
      edit(id) {
        this.$emit("edit", id);
      }
    }
  };
  </script>
  
  <style scoped>
  .imgUrl{
    width: 120px;
    height: 120px;
  }
  </style>
  